<template>
	<view>
		<view class="top-menu">
			<u-tabs :list="listData" :current="current" @click="clickTabs" lineColor="#00D26E" :activeStyle="{
			            color: '#00D26E',
						fontSize: '24rpx',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#333333',
						fontSize: '24rpx',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<view class="lb-main-32" v-if="listData&&listData[current]">
			<u-empty v-if="listData[current].cgoods.length < 1" mode="data" text="暂无数据"
				icon="/static/empty/data.png"></u-empty>

			<view class="lb-box" v-for="(item,index) in listData[current].cgoods" :key="index">
				<view class="lb-item">
					<view class="lb-left">
						<image :src="getImgUrl(item.detail.cover_image)" mode=""></image>
					</view>
					<view class="lb-right">
						<view class="lb-name">
							{{item.detail.name}}
						</view>
						<view class="lb-ratio">
							数量：
							<text>
								{{item.num}}
							</text>
						</view>
						<view class="lb-btn">
							<button class="btn" @click="goTo(item.id)">
								立即购买
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		channelGoods
	} from "@/api/apis/retail.js"
	import {
		setImgUrl,
		fmtFormat
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				limit: 10,
				listData: [],
				isLoading: false,
				current: 0
			}
		},
		// #ifdef MP
		onShareAppMessage: function(res) {
		},
		onShareTimeline: function(res) {
		},
		// #endif
		methods: {
			//切换tabs
			clickTabs(item) {
				this.current = item.index;
				this.page = 1;
				this.listData = []
				this.getList();
			},
			//跳转
			goTo(id) {
				uni.navigateTo({
					url: '/pages/channel/goods-detail/goods-detail?type=1&id=' + id
				})
			},
			//搜索
			search() {
				this.page = 1;
				this.getList()
			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
			//列表
			getList() {
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				this.isLoading = true;
				channelGoods().then(res => {
					uni.hideLoading();
					this.listData = res.data;
				})
			},
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			//注意 这里是重要的一步，不满足条件下拉加载不能继续请求数据
			if (!this.isLoading) {
				this.getList();
			}

		},
	}
</script>

<style lang="scss">
	.lb-search {
		padding: 15rpx 32rpx;
	}

	.top-menu {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lb-box {
		// height: 188rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
		border-radius: 16rpx;
		padding: 12rpx 24rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;

		.lb-item {
			display: flex;
			// align-items: center;

			.lb-left {
				width: 140rpx;
				height: 140rpx;
				padding: 12rpx 0;
			}

			.lb-right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding-left: 12rpx;

				.lb-name {
					font-size: $main-font-28;
					color: $main-font-color;
				}

				.lb-ratio {
					font-size: $main-font-24;
					color: $main-font-color;

					text {
						color: #F65D40;

						&::after {
							// content: '%';
						}
					}
				}

				.lb-btn {
					display: flex;

					.btn {
						display: flex;
						justify-content: space-evenly;
						align-items: center;
						margin-right: 24rpx;

						image {
							width: 28rpx;
							height: 28rpx;
						}

						width: 156rpx;
						height: 48rpx;
						background: linear-gradient(106deg, #F7583F 0%, #F28F4C 100%);
						border-radius: 24rpx;

						font-size: $main-font-24;
						color: $main-font-color-white;

						&:nth-of-type(2n-1) {
							background: linear-gradient(106deg, #FFC67D 0%, #FF8F35 100%);
						}
					}
				}
			}

		}
	}
</style>